<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Rain Animation</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --body-color: #181c1f;
      --primary-color: #ffffff;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: var(--body-color);
    }

    .container {
      width: 100%;
      height: 400px;
      display: flex;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      /* 添加一个从下往上线性渐变的镜像效果，增加视觉层次感 */
      -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, transparent, transparent, #0005);
    }

    .cloud {
      position: relative;
      top: 50px;
      z-index: 100;

      /* 横向云朵 */
      width: 320px;
      height: 100px;
      background-color: var(--primary-color);
      border-radius: 100px;

      /* drop-shadow函数将阴影效果应用于投影图像 */
      filter: drop-shadow(0 0 30px var(--primary-color));
    }

    .cloud::before {
      content: "";
      /* 左侧小云朵 */
      width: 110px;
      height: 110px;
      background-color: var(--primary-color);
      border-radius: 50%;
      position: absolute;
      top: -50px;
      left: 40px;

      /* 右侧大云朵 */
      box-shadow: 90px 0 0 30px var(--primary-color);
    }

    .cloud .text {
      position: absolute;
      top: 40px;
      height: 20px;
      line-height: 20px;

      text-transform: uppercase;
      color: var(--primary-color);
      /* 为文字添加阴影，看上去发光，增加视觉效果 */
      text-shadow: 0 0 5px var(--primary-color), 0 0 15px var(--primary-color), 0 0 30px var(--primary-color);
      transform-origin: bottom;
      animation: animate 2s linear forwards;
    }

    @keyframes animate {
      0% {
        transform: translateX(0);
      }

      70% {
        transform: translateY(290px);
      }

      100% {
        transform: translateY(290px);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="cloud">
      <!-- <div class="text">a</div> -->
      <!-- <div class="text">b</div> -->
      <!-- <div class="text">c</div> -->
      <!-- 雨滴将会在这里出现 -->
    </div>
  </div>

  <script>
    // 生成字母和数字数组
    function generateText () {
      const letters = [];
      const numbers = [];

      const a = "a".charCodeAt(0);

      for (let i = 0; i < 26; i++) {
        letters.push(String.fromCharCode(a + i));

        if (i < 9) {
          numbers.push(i + 1);
        }
      };

      return [...letters, ...numbers];
    };

    // 从生成的数组中随机取出一个字符
    function randomText () {
      const texts = generateText();
      const text = texts[Math.floor(Math.random() * texts.length)];

      return text;
    };

    function rainEffect () {
      const cloudEle = document.querySelector(".cloud");
      const textEle = document.createElement("div");

      textEle.innerText = randomText();
      textEle.classList.add("text");

      const left = Math.floor(Math.random() * 310);
      const size = Math.random() * 1.5;
      const duration = Math.random();
      const styleSheets = {
        left: `${left}px`,
        fontSize: `${0.5 + size}em`,
        animationDuration: `${1 + duration}s`,
      };
      Object.assign(textEle.style, styleSheets);

      cloudEle.appendChild(textEle);
      setTimeout(() => {
        cloudEle.removeChild(textEle);
      }, 2000);
    };

    // 每隔20ms创建一个雨滴元素
    setInterval(() => rainEffect(), 20);


  </script>
</body>

</html>
。